<template>
  <div class="teachers">
    <van-nav-bar title="讲师列表" />
    
    <div class="teacher-list">
      <van-card
        v-for="teacher in teachers"
        :key="teacher.id"
        :title="teacher.name"
        :desc="teacher.description"
        :thumb="teacher.avatar"
        @click="goToTeacherDetail(teacher.id)"
      >
        <template #tags>
          <van-tag plain type="primary" v-for="tag in teacher.expertise" :key="tag">
            {{ tag }}
          </van-tag>
        </template>
        <template #footer>
          <div class="rating">评分: {{ teacher.rating }}</div>
          <div class="student-count">学生数: {{ teacher.studentCount }}</div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { teacherApi } from '@/api';
import type { Teacher } from '@/api/types';

const router = useRouter();
const teachers = ref<Teacher[]>([]);

onMounted(async () => {
  try {
    const { data } = await teacherApi.getTeachers();
    teachers.value = data.data;
  } catch (error) {
    showToast('获取讲师列表失败');
  }
});

const goToTeacherDetail = (id: number) => {
  router.push(`/teacher/${id}`);
};
</script>

<style scoped>
.teachers {
  min-height: 100vh;
  background: #f7f8f8;
}

.teacher-list {
  padding: 10px;
}

.van-card {
  margin-bottom: 10px;
  background: #fff;
}

.rating, .student-count {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
</style>
